<template>
    <div class="login-vue" :style="bg">
        <div class="container">
            <p class="title">后台管理系统</p>
            <div class="input-c">
                <input type="text"  v-model="UserName" placeholder="用户名" AUTOCOMPLETE="off">
                <p class="error"></p>
            </div>
            <div class="input-c">
                <input type="text" v-model="PassWord" placeholder="密码" AUTOCOMPLETE="off" >
                <p class="error">{{errs}}</p>
            </div>
            <button class="isbtn" @click="tologin">登录</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            UserName:'',
            PassWord:'',
            errs: '',
            isShowLoading: false,
            bg: {},
        }
    },
    created() {
        this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
    },
    methods: {
        tologin(){
            var that = this;
            this.$axios.post('/admin/login',{
                UserName:this.UserName,
                PassWord:this.PassWord
            }).then(res=>{
                if(res.data.ret){
                   that.$router.push('/iadmin/index')
                }else{
                    this.errs = res.data.data
                }
            })
        }
    }
}
</script>

<style>

.login-vue {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.login-vue .isbtn{
    width:200px;
    color:#fff;
    font-size:14px;
    text-align:center;
    border:none;
    border-radius:6px;
    background: #2d8cf0;
    line-height:30px;
    cursor: pointer;
}
.login-vue .container {
    background: rgba(255, 255, 255, .5);
    width: 300px;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
}
.login-vue input {
    background-color: transparent;
    outline: #fff;
    border: 1px solid #dcdee2;
    border-color: #fff;
    color:#fff;
    width:180px;
    line-height:30px;
    height:30px;
    border-radius:6px;
    font-size:14px;
    padding:4px 10px
}
.login-vue ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, .8);
}
.login-vue :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: rgba(255, 255, 255, .8);
}
.login-vue ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: rgba(255, 255, 255, .8);
}
.login-vue :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255, 255, 255, .8);
}
.login-vue .title {
    font-size: 16px;
    margin-bottom: 20px;
}
.login-vue .input-c {
    margin: auto;
    width: 200px;
}
.login-vue .error {
    color: red;
    text-align: left;
    margin: 5px auto;
    font-size: 12px;
    padding-left: 30px;
    height: 20px;
}
.login-vue .submit {
    width: 200px;
}
.login-vue .account {
    margin-top: 30px;
}
.login-vue .account span {
    cursor: pointer;
}
.login-vue .ivu-icon {
    color: #eee;
}
.login-vue .ivu-icon-ios-close-circle {
    color: #777;
}
</style>
